<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<th:block th:include="include :: header('L类产品')"/>
<th:block th:include="include :: ele-vue"/>
<head>
    <meta charset="UTF-8">
    <title>L类产品</title>
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
    <link href="../static/css/login.min.css" th:href="@{/css/login.min.css}" rel="stylesheet"/>
    <link href="../static/ocean/css/ry-ui.css" th:href="@{/ocean/css/ry-ui.css?v=4.7.5}" rel="stylesheet"/>
</head>
<link href="../static/ocean/css/prt.css" th:href="@{/ocean/css/prt.css}" rel="stylesheet"/>
<!--<style>
    .prt_xq_tit {
        color: #333;
    }
    .bt{
        font-size:16px;
        margin: 0;
        padding: 0;
        font-family: "microsoft yahei";
    }
    .prt_xq_cot {
        margin-right: 20px;
        color: #838485;
        margin: 0;
        padding: 0;
        font-size: 14px;
        font-family: "微软雅黑";
        text-decoration: none;
    }
    table1 {
        border: 2px solid #5d5d5d;
        border-collapse: collapse; /* 移除双边框 */
    }
    .td1{
        width: 100px;
        height: 40px;
    }
    .prt_xq_bt {
        color: #3d6ee0;
        border: solid 1px #3d6ee0;
        width: 60px;
        text-align: center;
    }
</style>-->
<body>
<div class="prt_cont1_box">
    <div class="prt_cont1">
        <div style="display: flex;justify-content: center;width: 100%;margin-top: 40px">
            <div style="margin-top: 10px;margin-right: 100px;"><img src="./img/z.png"></div>
            <div style="font-size: 27px;">产品浏览</div>
            <div style="margin-top: 10px;margin-left: 100px;"><img src="./img/y.png"></div>
        </div>
    </div>
</div>
<div id="appltype" style="margin-top: 50px">
    <div style="margin: 0 auto;width: 1200px;height: 700px;border: 1px solid rgb(238, 238, 238)">
        <template>
            <el-form :inline="true" :model="formInline" size="mini">
                <el-form-item label="类型">
                    <el-select v-model="formInline.lx" placeholder="状态"  style="width: 100px">
                        <el-option label="海流" value="海流"></el-option>
                        <el-option label="海温" value="海温"></el-option>
                        <el-option label="海面风" value="海面风"></el-option>
                        <el-option label="海浪" value="海浪"></el-option>
                        <el-option label="海冰" value="海冰"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="formInline.zt" placeholder="状态"  style="width: 100px">
                        <el-option label="正常" value="0"></el-option>
                        <el-option label="晚传" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="级别">
                    <el-select v-model="formInline.jb" placeholder="级别"  style="width: 100px">
                        <el-option label="L0" value="L0"></el-option>
                        <el-option label="L1" value="L1"></el-option>
                        <el-option label="L2" value="L2"></el-option>
                        <el-option label="L3" value="L3"></el-option>
                        <el-option label="L4" value="L4"></el-option>
                        <el-option label="L5" value="L5"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="时间">
                    <el-date-picker
                            v-model="value1"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>  <el-button type="primary" @click="onjiankong">监控</el-button>
                </el-form-item>
            </el-form>
            <el-table
                    v-loading="loading"
                    :data="tableData"
                    height="538"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="filename"
                        label="文件名"
                        width="600">
                </el-table-column>
                <el-table-column
                        prop="filesize"
                        label="文件大小"
                        width="180"
                        :formatter="datasize">
                </el-table-column>
                <el-table-column
                        prop="rktime"
                        label="发布时间"
                        :formatter="formatTimestamp">
                </el-table-column>
                <el-table-column
                        prop="xzzt"
                        label="状态"
                        width="180">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.xzzt === 0" type="info">文件在服务器端</el-tag>
                        <el-tag v-if="scope.row.xzzt === 1" type="warning">文件传输中</el-tag>
                        <el-tag v-if="scope.row.xzzt === 2" type="success">文件已保存到当前服务器</el-tag>
                        <el-tag v-if="scope.row.xzzt === 3" type="danger"></el-tag>
                    <!--    <el-button style="padding: 5px 0px;" v-if="scope.row.xzzt === 0" @click="csddqfuq(scope.row)">传输到当前服务器</el-button>-->
                        <!--<el-tag v-else type="danger">未知</el-tag>-->
                    </template>
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="100">
                    <template slot-scope="scope">
                        <div v-if="scope.row.xzzt === 2">
                            <el-button  @click="xiazai(scope.row)" type="text" size="small">下载</el-button>
                            <el-button  @click="chakan(scope.row)" type="text" size="small">预览</el-button>
                        </div>
                        <div v-else>
                            <el-button  @click="xiazai(scope.row)" type="text" size="small" disabled>下载</el-button>
                            <el-button  @click="chakan(scope.row)" type="text" size="small" disabled>预览</el-button>
                        </div>

                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size=pageSize
                    pager-count=10
                    layout="total, sizes, prev, pager, next, jumper"
                    :total=totalCount>
            </el-pagination>
        </template>
    </div>
</div>
<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="../static/ajax/libs/validate/jquery.validate.min.js" th:src="@{/ajax/libs/validate/jquery.validate.min.js}"></script>
<script src="../static/ajax/libs/layer/layer.min.js" th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script src="../static/ajax/libs/blockUI/jquery.blockUI.js" th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
<script src="../static/ocean/js/ry-ui.js" th:src="@{/ocean/js/ry-ui.js?v=4.7.5}"></script>
<th:block th:include="include :: footer"/>
<script>
    var app1 = new Vue({
        // 控制的标签容器
        el: '#appltype',
        // 交互的数据
        data() {
            return {
                tableData: [],
                activeIndex: '1',
                menuList: [],
                defaultOpeneds: [],
                jb:"",
                dqcp:"",//当前选中的产品
                gs:"",//格式
                scbm:"",//生产部门
                bz:"",//备注
                formInline: {
                    lx: '',
                    jb: '',
                    zt:'',
                    kssj:'',
                    jssj:'',
                },
                value1: [],
                loading: true,
                // 当前页码
                currentPage: 1,
                // 总记录数
                totalCount: 0,
                // 每页显示条数
                pageSize: 10,
                //接收当前页数据集合
            }
        },
        mounted() {
           /* const today = new Date();
            const yesterday = new Date(today);
            yesterday.setDate(today.getDate() - 1);
            this.value1[0] = yesterday

            this.value1[1] = today*/

            that = this;
            //所有产品菜单
            $.post('/nc/ncfilemenu/menu', function (res) {
                that.menuList = res.data
                that.showdata(res.data);
            })
            //产品列表
            $.post('/nc/ncfilemenu/menulb', function (res) {
                if(res.data !=null){
                    that.jb = res.data[0].value
                    that.onegetcp(res.data[0].value)
                }
            })


        },
        methods: {
            csddqfuq(data){

            },
            /**
             * 预览方法
             * @param data
             */
            chakan(data){
                var prefix = "/leaflet/map";
                /**
                 * 获取智能网格产品配置
                 */
                console.log(data)
                var name = data.filename.split("_")
                $.post(prefix+"/getconfig",{bm:name[0],ljb:data.ljb},function (res){
                    console.log(res.data)//默認只能查出一条
                    var qbsj = "no";//默认值
                    var sjjg = "no";//默认值 时间间隔
                    var cpsjlx = "no";//默认值
                    var isjc = "no"//默认值
                    if(res.data.sjjg!=null){
                        sjjg = res.data.sjjg
                    }
                    if( res.data.cpsjlx !=null){
                        cpsjlx = res.data.cpsjlx
                    }
                    if(res.data.isjc!=null){
                        isjc = res.data.isjc
                    }
                    console.log($("#isjc").text()+"===================")
                    console.log(qbsj+"qbsj")
                    console.log(sjjg+"sjjg")
                    var namep =res.data.name
                    console.log("参数："+fileName+ "=" +qbsj+ "=" +sjjg+ "=" +cpsjlx+ "=" +isjc+"/"+namep)
                    console.log(data)
                    var fileName = data.filename;
                    $.modal.openOptions({
                        title: $("#namep").val(),
                        url: prefix + "/yl/" + fileName+ "/" +qbsj+ "/" +sjjg+ "/" +cpsjlx+ "/" +isjc+"/"+namep,
                        width: "1800",
                        height: "900",
                        showButtonPanel: false,
                        btn: ['关闭'],
                        yes: function (index, layero) {
                            $.modal.close(index);//使用layer.close(index);无效
                        },
                        cancel: function (index, layero) {
                            $.modal.close(index);
                        }
                    });
                })
            },
            /**
             * 分页
             * @param val
             */
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = val;
                this.onegetcp()
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
                this.onegetcp()
            },
            // 格式化时间戳的方法
            formatTimestamp(row, column, cellValue) {
                const date = new Date(cellValue);
                const year = date.getFullYear();
                const month = (date.getMonth() + 1).toString().padStart(2, '0');
                const day = date.getDate().toString().padStart(2, '0');
                return `${year}-${month}-${day}`;
            },
            onSubmit() {
                this.loading = true;
                that = this;
                console.log(this.formatDate(this.value1[0]))
                $.post('/product/ncfilemonitor/ltypejb', {filetype: this.formInline.lx,ljb:this.formInline.jb,zt:this.formInline.zt,kssj:this.formatDate(this.value1[0]),jssj:this.formatDate(this.value1[1]),currentPage:this.currentPage,pageSize:this.pageSize}, function (res) {
                    that.dqcp = that.jb;
                    that.tableData = res.list
                    that.totalCount = res.total
                    that.getcpnr(that.jb);//获取产品内容
                    that.loading = false;
                })
            },
            onjiankong(){
                window.location.href = "/product/nctj"
            },
            formatDate(date) {
                console.log(date)
                if(typeof date === "undefined"){
                    return "";
                }else{
                    // 提取日期和时间部分
                    const year = date.getFullYear();
                    const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，需要加1
                    const day = date.getDate().toString().padStart(2, '0');
                    const hours = date.getHours().toString().padStart(2, '0');
                    const minutes = date.getMinutes().toString().padStart(2, '0');
                    const seconds = date.getSeconds().toString().padStart(2, '0');

                    // 组合成所需格式的字符串
                    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
                }

            },
            // 转换文件大小GB
            datasize(row, column, cellValue) {
                // 首先，将字节数转换为GB（1GB = 10243字节）
                const gb = cellValue / (1024 ** 2);
                // 接着，使用toFixed(2)方法来保留两位小数，并将结果转换为字符串
                return gb.toFixed(2)+"MB";
            },
            //第一次进入时获取产品列表
            onegetcp(){
                that = this;
                $.post('/product/ncfilemonitor/ltypejb', {filetype: this.formInline.lx,ljb:this.formInline.jb,zt:this.formInline.zt,currentPage:this.currentPage,pageSize:this.pageSize}, function (res) {
                    that.dqcp = that.jb;
                    that.tableData = res.list
                    that.totalCount = res.total
                    that.getcpnr(that.jb);//获取产品内容
                    that.loading = false;
                })
            },
            //获取默认展示
            showdata(data){
                for (let i = 0; i <data.length; i++) {
                    this.defaultOpeneds.push(data[i].id);
                }
                console.log(this.defaultOpeneds)
            },
            //选择产品
            handleSelect(key) {
                //console.log(key);
                that = this;
                $.post('/product/ncfilemonitor/ltypejb', {type: key}, function (res) {
                    that.dqcp = key;//设置当前点击的产品为
                    that.tableData = res.data
                    that.getcpnr(key);//获取产品内容
                })
            },
            //查看产品内容
            getcpnr(key){
                that = this;
                $.post('/nc/ncfilemenu/nr',{key:key}, function (res) {
                    console.log(res);
                    that.gs = res.data.gs;
                    that.scbm = res.data.scbm;
                    that.bz = res.data.bz;
                })
            },
            dateFormat(row, column, cellValue, index) {
                let date = new Date(parseInt(cellValue));
                if (isNaN(date)) return '--'
                let Y = date.getFullYear() + '-';
                let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-';
                let D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' ';
                return Y + M + D;//不要 时分秒
            },
            /**
             * 在win上下载路径有问题，不能下载，是按照linux上面的路径参数，部署到linux中就好了
             * @param path
             */
            xiazai(path) {
                console.log(path)
                    var prefix1 ="system/url";
                    var p = path.filename.split("_");
                    var fileId = path.id;
                    lj = "cloud/ocean/"+p[0]+"/"+p[1]+"/"+p[2]+"/"+p[3]+"/"+path.filename;
                    $.post('/system/order/tjwyxzsj', {path: lj,cp:"111222"}, function (res) {//将该下载单设置为网页端下载
                        $.modal.openOptions({
                            title: '裁剪',
                            url: prefix1 + '/cjdata/' + fileId,
                            width: "900",
                            height: "900",
                            showButtonPanel: false,
                            btn: ['关闭'],
                            yes: function (index, layero) {
                                $.modal.close(index);//使用layer.close(index);无效
                            },
                            cancel: function (index, layero) {
                                $.modal.close(index);
                            }
                        });
                    })
            },
            yvlan(file){
                var prefix ="/leaflet/map";
                $.modal.openOptions({
                    title: '预览',
                    url: prefix +"/yl/"+file.filename,
                    width: "1300",
                    height: "800",
                    showButtonPanel: false,
                    btn: ['关闭'],
                    yes: function(index, layero){
                        $.modal.close(index);//使用layer.close(index);无效
                    },
                    cancel: function(index, layero){
                        $.modal.close(index);
                    }
                });
            },
            //跳转订阅
            subscription(productId) {
                $("#test").load("/home/productBrowsing/subscription/"+"ZNWG_"+this.dqcp);
            },
            download(data, filename, mime, bom) {
                var blobData = typeof bom !== "undefined" ? [bom, data] : [data];
                var blob = new Blob(blobData, {type: mime || "application/octet-stream"});
                if (typeof window.navigator.msSaveBlob !== "undefined") {
                    //“HTML7007:一个或多个blob URL为
                    //通过关闭为其创建的blob而吊销。
                    //这些URL将不再解析为数据备份
                    //URL已被释放。"
                    window.navigator.msSaveBlob(blob, filename);
                } else {
                    var blobURL =
                        window.URL && window.URL.createObjectURL
                            ? window.URL.createObjectURL(blob)
                            : window.webkitURL.createObjectURL(blob);
                    var tempLink = document.createElement("a");
                    tempLink.style.display = "none";
                    tempLink.href = blobURL;
                    tempLink.setAttribute("download", filename);

                    //Safari认为_blank锚点是弹出窗口。我们只想设置_blank
                    //目标，如果浏览器不支持HTML5下载属性。
                    //这允许您在桌面safari中下载文件，如果弹出窗口被阻止
                    //已启用。
                    if (typeof tempLink.download === "undefined") {
                        tempLink.setAttribute("target", "_blank");
                    }

                    document.body.appendChild(tempLink);
                    tempLink.click();
                    //修复了“webkit blob资源错误1”
                    setTimeout(function () {
                        document.body.removeChild(tempLink);
                        window.URL.revokeObjectURL(blobURL);
                    }, 200);
                }
            }
        }
    })
</script>
</body>
</html>